<template>
	<view class="coupon">
		<view v-if="id">
			<view class="coupon-card" v-for="(item, i) in data" :key="i" @click="choose(i)">
				<image class="image" src="https://carching.cd1a.cn/images/mini_program/coupon.png"></image>
				<view class="card">
					<view class="content">
						<text>{{ item.type }}</text>
						<text class="cash"><text class="logo">￥</text>{{ item.money }}</text>
					</view>
				</view>
				<view class="card-bottom">
					<view class="content">
						<text class="date"><text class="times">有效截止日期:</text>{{ item.limit_time }}</text>
						<view class="use">{{ item.state }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="coupon-content" v-for="(item, i) in data" :key="i">
				<image class="image" src="https://carching.cd1a.cn/images/mini_program/coupon.png"></image>
				<view class="card">
					<view class="content">
						<text>{{ item.type }}</text>
						<text class="cash"><text class="logo">￥</text>{{ item.money }}</text>
					</view>
				</view>
				<view class="card-bottom">
					<view class="content">
						<text class="date"><text class="times">有效截止日期:</text>{{ item.limit_time }}</text>
						<view class="use">{{ item.state }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import paths from "../../config/path.js"
	import { post } from "../../api/index.js"
	export default {
		data() {
			return {
				data: "",
				id: "",
				money: "",
				cardId: ""
			}
		},
		onLoad(option) {
			let userData = uni.getStorageSync("userInfo")
			let url = paths.coupon
			this.id = option.id
			if (option.id) {
				post(url, {
					userid_locked: userData.userid_locked,
					server_sum_money: option.id
				}).then(res => {
					// console.log(res)
					this.data = res.data.list
				})
			} else {
				post(url, {
					userid_locked: userData.userid_locked
				}).then(res => {
					// console.log(res)
					if (res.data.code == "2") {
						this.data = res.data.list
					} else {
						uni.showModal({
							content: res.data.msg,
							showCancel: false,
							success: function() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			}
		},
		methods: {
			choose(i) {
				this.money = this.data[i].money
				this.cardId = this.data[i].card_id
				uni.reLaunch({
					url: `../order/index?id=${this.money}&name=${this.cardId}`
				})
			}
		}
	}
</script>

<style scoped>
	.coupon {
		width: 100%;
	}

	.coupon-content {
		margin: 20rpx auto;
		width: 95%;
		position: relative;
	}

	.coupon-card {
		margin: 20rpx auto;
		width: 95%;
		position: relative;
	}
	.coupon-card:active {
		background-color: #8d8d8d;
	}

	.image {
		width: 100%;
		height: 240rpx;
	}

	.card {
		width: 100%;
		position: absolute;
		top: 35rpx;
	}

	.card-bottom {
		width: 100%;
		position: absolute;
		top: 185rpx;
	}

	.content {
		display: flex;
		justify-content: space-between;
		margin: 0 30rpx;
		color: #FFFFFF;
		letter-spacing: 1px;
	}

	.cash {
		font-size: 125rpx;
		line-height: 110rpx;
	}

	.logo {
		font-size: 45rpx;
	}

	.date {
		font-size: 25rpx;
		line-height: 50rpx;
	}

	.times {
		margin-right: 20rpx;
	}

	.use {
		width: 140rpx;
		border: 1px solid #FFFFFF;
		height: 42rpx;
		border-radius: 999px;
		text-align: center;
		font-size: 30rpx;
	}

	button {
		border-radius: 999px;
		color: #FFFFFF;
		letter-spacing: 1px;
		background-color: #0DA297;
		width: 90%;
		margin-top: 110rpx;
	}

	button:active {
		background-color: #cfcfcf;
	}
</style>
